04. Create the Empty View

A empty view is a view which is shown when there are no items in the ListView. Instead of showing a blank screen in the app when there is no data, having an attractive image or descriptive text can improve the user experience. The text can even prompt the user to add some data.

In our Pets app, we’d like to setup the below empty view when there are no pets to display in the ListView.

Setting this up is pretty easy.

Step 1: Create the Empty View next to the List View
Start by creating an empty view in your layout. In our case, it should have two TextViews and an ImageView, aligned like such. Also give the empty view an id of “@+id/empty_view” so we can refer to it later in Java code.

    <!-- Empty view for the list -->
     <RelativeLayout
         android:id="@+id/empty_view"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_centerInParent="true">

         <ImageView
             android:id="@+id/empty_shelter_image"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_centerHorizontal="true"
             android:src="@drawable/ic_empty_shelter"/>

         <TextView
             android:id="@+id/empty_title_text"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_below="@+id/empty_shelter_image"
             android:layout_centerHorizontal="true"
             android:fontFamily="sans-serif-medium"
             android:paddingTop="16dp"
             android:text="@string/empty_view_title_text"
             android:textAppearance="?android:textAppearanceMedium"/>

         <TextView
             android:id="@+id/empty_subtitle_text"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_below="@+id/empty_title_text"
             android:layout_centerHorizontal="true"
             android:fontFamily="sans-serif"
             android:paddingTop="8dp"
             android:text="@string/empty_view_subtitle_text"
             android:textAppearance="?android:textAppearanceSmall"
             android:textColor="#A2AAB0"/>
     </RelativeLayout>

For the the text, use the strings.xml resource file.

     <!-- Title text for the empty view, which describes the empty dog house image [CHAR LIMIT=50] -->
     <string name="empty_view_title_text">It\'s a bit lonely here...</string>

     <!-- Subtitle text for the empty view that prompts the user to add a pet [CHAR LIMIT=50] -->
     <string name="empty_view_subtitle_text">Get started by adding a pet</string>

Step 2: Add the Empty View

When you create the ListView, you can specify an empty view by id. Using the id we set earlier, get the view using findViewById() method and then use the ListView’s setEmptyView() method to set the empty view.

        // Find the ListView which will be populated with the pet data
         ListView petListView = (ListView) findViewById(R.id.list);

         // Find and set empty view on the ListView, so that it only shows when the list has 0 items.
         View emptyView = findViewById(R.id.empty_view);
         petListView.setEmptyView(emptyView);

Step 3: Test It
Delete the data or uninstall and reinstall the app to start with an empty database. You should now find that the empty view appears on screen!

The code changes can be seen here.